<template id='emailVerification'>
    <div class="emailVerification">
        <SignCard :options="emailVerifyData" @click="submit">
            <template v-slot:descs>
                <div class="descs">
                    <p class="desc">{{ emailVerifyData.desc }}</p>
                    <p class="email">{{ emailVerifyData.email }}</p>
                    <p class="desc">{{ emailVerifyData.desc2 }}</p>
                </div>
            </template>
            <template v-slot:form>
                <div class="form">
                    <ZyInput :zyModel="emailVerifyData.verify" ref="verify"></ZyInput>
                    <div class="tips">
                        <p>Didn’t receive the email? Check your spam folder</p>
                        <p>or</p>
                        <p class="alink" @click="reSendEmail">click here to send again</p>
                    </div>
                </div>
            </template>
        </SignCard>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { setCookie } from "@/utils/cookie.js";
import { createNamespacedHelpers } from "vuex";
const emailVerify = createNamespacedHelpers('emailVerify')
const newPassword = createNamespacedHelpers('newPassword')
export default {
    name: 'emailVerification',
    components: {
    },
    props: {
        step: {
            type: Number
        }
    },
    // 定义属性
    data() {
        return {

        }
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
        ...emailVerify.mapState(['emailVerifyData']),
        ...newPassword.mapState(['newPasswordData']),
    },
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        //显示input框提示
        showTips() {
            this.$refs.verify.showFlag()
        },

        //邮箱验证下一步
        submit() {
            if (this.$refs.verify.check('password')) {
                if (this.step == 3) { //忘记密码
                    this.forgetPassVerify()
                } else if (this.step == 5) { //注册校验邮箱
                    this.registerCode();
                } else if (this.step == 7) { //修改邮箱校验
                    this.changeEmailSave()
                }
            }
        },
        //重置校验
        reset() {
            this.$refs.verify.reset()
        },

        //忘记密码邮箱校验码
        async forgetPassVerify() {
            let res = await this.$api.register.forgetPassVerifyApi({
                "code": this.emailVerifyData.verify.value,
                "email": this.emailVerifyData.realEmail,
            })
            if (this.$isCode(res, true)) {
                this.newPasswordData.realEmail = this.emailVerifyData.realEmail
                this.$emit('submit')
            } else {
                this.showTips();
            }
        },


        //注册校验邮箱提交验证码
        async registerCode() {
            let res = await this.$api.register.registerCodeApi({
                "email": this.emailVerifyData.realEmail,
                "pwd": this.emailVerifyData.password,
                "code": this.emailVerifyData.verify.value,
            })
            if (this.$isCode(res, true)) {
                this.$emit('submit')
            } else {
                this.showTips();
            }
        },

        //修改邮箱提交验证码
        async changeEmailSave() {
            let res = await this.$api.profile.changeEmailSaveApi({
                "email": this.emailVerifyData.realEmail,
                "code": this.emailVerifyData.verify.value,
            })
            if (this.$isCode(res, true)) {
                setCookie("token", res.data, 7);
                setCookie("email", "");
                setCookie("password", "");
                this.$emit('submit')
            } else {
                this.showTips();
            }
        },
        //重新发送邮件
        async reSendEmail() {
            console.log(this.step);
            if (this.step == 3) {//忘记密码
                let res = await this.$api.register.forgetPassApi({
                    email: this.emailVerifyData.realEmail,
                })
                if (this.$isCode(res, true)) { }
            } else if (this.step == 5) { //注册校验邮箱
                let res = await this.$api.register.userLoginApi({
                    "email": this.emailVerifyData.realEmail,
                    "pwd": this.emailVerifyData.password,
                })
                if (this.$isCode(res, true)) { }
            } else if (this.step == 7) { //修改邮箱校验
                let res = await this.$api.profile.changEmailVerifyApi({
                    "email": this.emailVerifyData.realEmail,
                    "pwd": this.emailVerifyData.password,
                })
                if (this.$isCode(res, true)) { }
            }


        },
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
.emailVerification {
    .descs {
        margin-top: 56px;
        color: @dColor;
        font-size: 18px;
        font-family: @tFamily;
        text-align: center;
        width: 390px;
        line-height: 1.5;

        .email {
            margin: 10px 0 30px 0;
            color: @tColor;
        }
    }

    .form {
        margin-top: 30px;

        .tips {
            margin-top: 60px;
            text-align: center;
            font-size: 14px;

            p {
                margin-bottom: 15px;
            }

            p:last-child {
                margin-bottom: 0
            }

            .alink {
                user-select: none;
                cursor: pointer;
                border-bottom: 1px solid @tColor;
                width: fit-content;
                margin: 0 auto;
            }
        }
    }
}

//手机样式
@media screen and (max-width: 650px) {
    .emailVerification {
        .descs {
            margin-top: 36px !important;
            width: 100% !important;

            .email {
                margin-bottom: 20px;
            }
        }

        .form {
            margin-top: 20px;
            width: 100%;

            .tips {
                margin-top: 20px;

                p {
                    margin-bottom: 10px;
                }
            }
        }
    }

}
</style>